<template>
  <view class="message-container">
    <!-- 顶部标题栏 -->
    <view class="message-header">
      <text class="header-title">消息中心</text>
      <text class="header-subtitle">共{{messages.length}}条消息</text>
    </view>

    <!-- 消息分类选项卡 -->
    <view class="message-tabs">
      <view 
        class="tab-item" 
        :class="{'active': activeTab === 0}"
        @click="activeTab = 0"
      >
        <text>全部</text>
        <view class="tab-indicator"></view>
      </view>
      <view 
        class="tab-item" 
        :class="{'active': activeTab === 1}"
        @click="activeTab = 1"
      >
        <text>系统通知</text>
        <view class="tab-indicator"></view>
      </view>
      <view 
        class="tab-item" 
        :class="{'active': activeTab === 2}"
        @click="activeTab = 2"
      >
        <text>充电提醒</text>
        <view class="tab-indicator"></view>
      </view>
    </view>

    <!-- 消息列表 -->
    <view class="message-list">
      <view 
        class="message-item" 
        v-for="(message, index) in filteredMessages" 
        :key="index"
        :class="{'unread': !message.read}"
      >
        <view class="message-icon" :style="{backgroundColor: getMessageColor(message.type)}">
          <text class="icon-text">{{getMessageIcon(message.type)}}</text>
        </view>
        <view class="message-content">
          <view class="message-header">
            <text class="message-title">{{message.title}}</text>
            <text class="message-time">{{message.time}}</text>
          </view>
          <text class="message-desc">{{message.content}}</text>
          <view class="message-tags" v-if="message.tags && message.tags.length">
            <text class="tag" v-for="(tag, i) in message.tags" :key="i">{{tag}}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="filteredMessages.length === 0">
      <view class="empty-icon">📭</view>
      <text class="empty-text">暂无消息</text>
      <text class="empty-subtext">您暂时没有收到新消息</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0, // 0-全部 1-系统 2-充电
      messages: [
        {
          id: 1,
          title: "充电完成通知",
          content: "您的车辆在XX充电站已完成充电，共充电45.6度，消费68.4元。",
          time: "10:30",
          date: "2023-08-15",
          type: "charging",
          read: false,
          tags: ["充电完成"]
        },
        {
          id: 2,
          title: "系统维护通知",
          content: "将于8月16日00:00-06:00进行系统升级维护，期间可能无法使用充电服务。",
          time: "昨天",
          date: "2023-08-14",
          type: "system",
          read: true,
          tags: ["系统公告"]
        },
        {
          id: 3,
          title: "充电异常提醒",
          content: "检测到您的充电过程中出现异常中断，请检查充电连接是否正常。",
          time: "08-13",
          date: "2023-08-13",
          type: "charging",
          read: true,
          tags: ["异常提醒"]
        },
        {
          id: 4,
          title: "优惠券到账",
          content: "您获得了一张满50减5元的充电优惠券，有效期至2023-08-31。",
          time: "08-12",
          date: "2023-08-12",
          type: "promotion",
          read: true,
          tags: ["优惠券"]
        },
        {
          id: 5,
          title: "充电站评价邀请",
          content: "您最近在XX充电站完成了充电，点击评价您的充电体验。",
          time: "08-10",
          date: "2023-08-10",
          type: "system",
          read: true
        }
      ]
    }
  },
  computed: {
    filteredMessages() {
      if (this.activeTab === 0) return this.messages;
      if (this.activeTab === 1) return this.messages.filter(m => m.type === 'system');
      return this.messages.filter(m => m.type === 'charging');
    }
  },
  methods: {
    getMessageColor(type) {
      const colors = {
        system: '#2196F3',
        charging: '#4CAF50',
        promotion: '#FF9800'
      };
      return colors[type] || '#9E9E9E';
    },
    getMessageIcon(type) {
      const icons = {
        system: '📢',
        charging: '⚡',
        promotion: '🎁'
      };
      return icons[type] || '✉️';
    }
  }
}
</script>

<style>
.message-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 40rpx;
}

/* 顶部标题栏 */
.message-header {
  padding: 40rpx 30rpx 20rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}
.header-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  display: block;
}
.header-subtitle {
  font-size: 26rpx;
  color: #999;
  margin-top: 10rpx;
  display: block;
}

/* 消息分类选项卡 */
.message-tabs {
  display: flex;
  background-color: #fff;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #eee;
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  position: relative;
}
.tab-item text {
  font-size: 28rpx;
  color: #666;
}
.tab-item.active text {
  color: #07C160;
  font-weight: bold;
}
.tab-indicator {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80rpx;
  height: 4rpx;
  background-color: transparent;
}
.tab-item.active .tab-indicator {
  background-color: #07C160;
}

/* 消息列表 */
.message-list {
  padding: 20rpx 30rpx;
}
.message-item {
  display: flex;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 25rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}
.message-item.unread {
  border-left: 6rpx solid #07C160;
}

/* 消息图标 */
.message-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  flex-shrink: 0;
}
.icon-text {
  font-size: 40rpx;
}

/* 消息内容 */
.message-content {
  flex: 1;
}
.message-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}
.message-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}
.message-item.unread .message-title {
  color: #07C160;
}
.message-time {
  font-size: 24rpx;
  color: #999;
}
.message-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.message-tags {
  margin-top: 15rpx;
  display: flex;
  flex-wrap: wrap;
}
.tag {
  font-size: 22rpx;
  color: #07C160;
  background-color: #E8F8F0;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
  margin-right: 10rpx;
  margin-top: 8rpx;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  text-align: center;
}
.empty-icon {
  font-size: 80rpx;
  margin-bottom: 30rpx;
  opacity: 0.5;
}
.empty-text {
  font-size: 32rpx;
  color: #999;
  margin-bottom: 10rpx;
}
.empty-subtext {
  font-size: 26rpx;
  color: #ccc;
}
</style>